<template>
	<div id="detail">
		<detail-nav-bar class="datail-nav-bar"
						@titleClick="titleClick"
						ref="nav"></detail-nav-bar>
		<scroll class="scroll-content" 
				ref="scroll"
				:probeType="3"
				@scroll="contentScroll">
			<detail-swiper :topImages="topImages"></detail-swiper>
			<detail-base-info :goods="goods"></detail-base-info>
			<detail-shop-info :shop="shop"></detail-shop-info>
			<detail-goods-info 
				:detail-info="detailInfo"
				@imageLoad="imageLoad">
			</detail-goods-info>
			<detail-param-info 
				:param-info="paramInfo" 
				ref="params">
			</detail-param-info>
			<detail-comment-info 
				:commentInfo="commentInfo" 
				ref="comments">
			</detail-comment-info>
			<goods-list :goods="recommends" ref="recommends"></goods-list>
		</scroll>	
		<detail-bottom-bar @addCart="addToCart"></detail-bottom-bar>
		<back-top @click.native="backClick" v-show="isShowBackTop" />
	</div>
</template>

<script>
	//导入详情页导航栏组件 DetailNavBar.vue
	import DetailNavBar from './childComps/DetailNavBar.vue'
	
	import { getDetail, Goods, Shop, GoodsParam, getRecommend } from 'network/detail.js'
	
	//导入轮播图组件 DetailSwiper.vue
	import DetailSwiper from './childComps/DetailSwiper.vue'
	
	//导入商品基本信息组件 DetailBaseInfo.vue
	import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
	
	//导入商家信息组件 DetailShopInfo.vue
	import DetailShopInfo from './childComps/DetailShopInfo.vue'
	
	//导入第三方滚动框架better-scroll
	import Scroll from 'components/common/scroll/Scroll.vue'
	
	//导入商品详情数据组件
	import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
	
	//导入商品参数组件 DetailParamInfo.vue
	import DetailParamInfo from './childComps/DetailParamInfo.vue'
	
	//导入评论信息组件 DetailCommentInfo.vue
	import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
	
	//导入 GoodsList.vue
	import GoodsList from 'components/content/goods/GoodsList.vue'
	
	//导入itemListenerMixin
	import {itemListenerMixin, backTopMixin} from 'common/mixin.js'
	
	//导入底部工具栏组件
	import DetailBottomBar from './childComps/DetailBottomBar.vue'
	
	import { mapActions } from 'vuex'
	
	export default {
		name:"Detail",
		mixins: [itemListenerMixin, backTopMixin],
		data(){
			return {
				iid: null,
				topImages: [],
				goods: {},
				shop: {},
				detailInfo: {},
				paramInfo: {},
				commentInfo: {},
				recommends: [],
				themeTopYs: [],
				currentIndex: 0,
				message: '',
				show: false
			}
		},
		components: {
			DetailNavBar,
			DetailSwiper,
			DetailBaseInfo,
			DetailShopInfo,
			Scroll,
			DetailGoodsInfo,
			DetailParamInfo,
			DetailCommentInfo,
			GoodsList,
			DetailBottomBar
		},
		methods: {
			...mapActions(['addCart']),
			
			imageLoad(){
				//console.log('所有图片加载完成了~~~~')
				this.$refs.scroll.refresh()				
				
				//获取标题对应内容的offsetTop
				this.themeTopYs.push(0)
				this.themeTopYs.push(this.$refs.params.$el.offsetTop)
				this.themeTopYs.push(this.$refs.comments.$el.offsetTop)
				this.themeTopYs.push(this.$refs.recommends.$el.offsetTop)
				//console.log(this.themeTopYs)
				this.themeTopYs.push(Number.MAX_VALUE)
			},
			titleClick(index){
				//console.log(index)
				this.$refs.scroll.scrollTo(0, -this.themeTopYs[index])
			},
			//滚动事件的回调函数
			contentScroll(position){
				//console.log(position.y)
				
				//1.获取滚动的y坐标
				const positionY = -position.y
				
				//2.将y和内容的themeTopYs进行对比
				const length = this.themeTopYs.length
				//更巧妙的方式
				for(let i=0; i<length-1; i++){
					if( (this.currentIndex !== i) && (positionY >= this.themeTopYs[i]) &&
					 positionY < this.themeTopYs[i+1] ){
						//console.log(i)
						
						this.currentIndex = i
						
						this.$refs.nav.currentIndex = this.currentIndex
					}
				}
								
				//判断返回按钮是否显示
				this.setShowBackTop(position)				
			},
			
			//加入购物车按钮的点击事件的回调函数
			addToCart(){
				//console.log('点击了 加入购物车 按钮')
				
				//1.获取需要在购物车中展示的信息
				const product = {}
				
				product.iid = this.iid
				product.image = this.topImages[0]
				product.title = this.goods.title
				product.desc = this.goods.desc
				product.price = this.goods.realPrice
				product.count = 1
				product.checked = true
				
				//2.将商品加入购物车
				/* this.$store.commit('addCart', product) */
				/* this.$store.dispatch('addCart', product).then(result => {
					//console.log(result)
				}) */
				
				this.addCart(product).then(result => {
					//console.log(result)
					
					/* this.show = true
					
					this.message = result
					
					setTimeout(() => {
						this.message = ''
						this.show = false
					}, 1500) */
					
					this.$toast.show(result, 2000)
					
				})
			}
			
		},
		created(){
			//1.保存商品的id
			this.iid = this.$route.params.id
			
			//2.根据商品iid，请求数据
			getDetail(this.iid).then(result => {
				//console.log(result)
				
				const data = result.data.result
				
				//1.解析、保存顶部的轮播图数据
				this.topImages = data.itemInfo.topImages
				//console.log(this.topImages)
				
				//2.解析、保存商品数据
				this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
				//console.log(this.goods)
				
				//3.获取、保存商家信息
				this.shop = new Shop(data.shopInfo)
				//console.log(this.shop)
				
				//4.保存商品的详情数据
				this.detailInfo = data.detailInfo
				
				//5.获取参数的信息
				this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
				//console.log(this.paramInfo)
				
				//6.取出评论信息
				if(data.rate.cRate !== 0){
					this.commentInfo = data.rate.list[0]
					//console.log(this.commentInfo)
				}
				
			})
			
			//3.请求推荐信息数据
			getRecommend().then(res=>{
				//console.log(res)
				this.recommends = res.data.data.list
				//console.log(this.recommends)
			})
		},
		mounted(){
			//console.log('detail mounted~~~')
		},
		destroyed(){
			//取消全局事件itemImageLoad的监听
			this.$bus.$off('itemImageLoad', this.itemImgListener)
		}
	}
</script>

<style scoped="scoped">
	#detail {
		position: relative;
		z-index: 11;
		background-color: #fff;
		height: 100vh;
	}
	.scroll-content {
		height: calc(100% - 44px - 49px);
		overflow: hidden;
	}
	.datail-nav-bar {
		position: relative;
		z-index: 12;
		background-color: #fff;
	}
</style>

